<template>
 <div>
     <el-container>
      <el-aside
        width="200px"
        style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:10px"
      >
        <div class="el-form-item__label" style="font-size:18px;font-weight:bold;color:#409EFF">选择控件</div>
        <div class="flex">
            <div v-for="item in list" class="listItem" draggable='true' @dragenter="darg(item.type)">
            <i :class="item.class"></i>
            <label class="el-form-item__label">{{item.name}}</label>
        </div>
        </div>
      </el-aside>
      <el-main style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
      border-radius:6px;
      padding:10px;
      margin-left:20px;
      margin-right:20px">
          <div style="width:100%;height:100%;cursor: pointer">
            <div @drop="drop(event)" @dragover="dragover(event)" style="width:100%;height:100%;cursor: pointer">
            </div>
          </div>
      </el-main>
       <el-aside
        width="500px"
        style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:10px"
      >
        <div class="el-form-item__label" style="font-size:18px;font-weight:bold;color:#409EFF">修改控件属性</div>
        <div class="_flex">
            <div v-for="item in attributeList" class="listItem">
            <i :class="item.class"></i>
            <label class="el-form-item__label">{{item.name}}</label>
        </div>
        <el-button type="primary">提交</el-button>
        </div>
      </el-aside>
     </el-container>
 </div>
</template>
<script>
export default {
    name:"formConfig",
    data(){
        return{
           list:[
               {name:"输入框",class:"el-icon-remove",type:"1"},
               {name:"下拉选择框",class:"el-icon-success",type:"2"},
               {name:"时间选择框",class:"el-icon-s-marketing",type:"3"},
               {name:"日期选择器",class:"el-icon-s-data",type:"4"},
               {name:"多行输入框",class:"el-icon-s-unfold",type:"5"},
               {name:"数字输入框",class:"el-icon-s-grid",type:"6"},
               {name:"附件上传",class:"el-icon-circle-plus",type:"7"},
           ],
           attributeList:[
               {name:"属性名",type:"1"},
               {name:"控件类型",type:"2"},
               {name:"是否必填",type:"8"},
           ]
        }
      },
      methods:{
          drag(event){
              event.preventDefault();
               console.log("drag",event)
          },
          drop(event){
              event.preventDefault();
              console.log("drop",event)
          },
          dragover(event){
              event.preventDefault();
               console.log("dragover",event)
          }
      }
}
</script>
<style scoped>
.flex{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
._flex{
    text-align: left;
}
.el-form-item__label{
    text-align: center;
    float: none;
}
.el-aside{
    height: 816px;
}
.listItem{
    width: 100%;
    margin: 5px 0;
    border: 1px solid #F2F6FC;
    padding-left:10px ;
}
</style>
